<template>
  <div>
    <I-Input
      v-model="fieldValue"
      is-link
      readonly
      :required="required"
      :rules="rules"
      :label="label"
      :input-align="inputAlign"
      :placeholder="placeholder"
      @click="showPickerClick"
    ></I-Input>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-time-picker
        v-bind="computedAttrs"
        v-model="currentValue"
        @confirm="confirmHandler"
        @cancel="cancelHandler"
      />
    </van-popup>
  </div>
</template>
    
  <script setup name="I-Time">
import { ref } from 'vue'
const $attrs = useAttrs()

const modelValue = defineModel({})
const formatLabel = (val) => {
  return (val || []).join(' ')
}
const fieldValue = ref()
const currentValue = ref()
const showPicker = ref(false)
const props = defineProps({
  label: {
    type: String,
    default: ''
  },

  required: {
    type: Boolean,
    default: false
  },

  rules: {
    type: Array,
    default: () => []
  },
  inputAlign: {
    type: String,
    default: 'right'
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  title: {
    type: String,
    default: '选择时间'
  }
})

const showPickerClick = () => {
  showPicker.value = true
}
const cancelHandler = () => {
  showPicker.value = false
}
const confirmHandler = ({ selectedValues }) => {
  modelValue.value = selectedValues
  showPicker.value = false
}
// 计算属性，合并 props 和 $attrs
const computedAttrs = computed(() => {
  return {
    ...$attrs,
    title: props.title
  }
})
watch(
  () => modelValue.value,
  (value) => {
    fieldValue.value = formatLabel(value)
    currentValue.value = value
  },
  { immediate: true }
)
</script>
    
  <style scoped>
</style>